<template>
  <div class="motherboard-wrapper">
    <Header
      v-if="pageConfig.header && pageConfig.header.show"
      :config="pageConfig.header"
      :style="pageConfig.header.style"
    ></Header>
    <div class="main-content">
      <!-- 页面主体 共用组件 -->
      <page-main />
      <div class="main-content-l"></div>
      <div class="main-content-r"></div>
    </div>

    <!-- <Loading v-if="isLoading"></Loading> -->
  </div>
</template>

<script setup>
/**
 * 母版
 * @author 朱琦
 * @date   时间：2023/2/10
 */
import { ref, onMounted, watch, computed, markRaw, shallowRef, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Header from './Header.vue'
import PageMain from '../../PageMain.vue'
import Loading from 'bComponent/components/loading'

const route = useRoute()
const router = useRouter()
const store = useStore()

const isLoading = shallowRef(true)
const { proxy } = getCurrentInstance()
// 是否有菜单组件
const hasMenu = ref(false)
// 当前菜单组件的路由名
const currentRouteName = ref(null)
// 是否有详情
const hasDetail = ref(false)
const currentDetailConfig = ref({
  map: null,
  panel: null
})
// 详情（地图上）配置
const detailMapConfig = ref(null)
// 详情（面板上）配置
const detailPanelConfig = ref(null)

// 页面配置
const pageConfig = computed(() => store.getters['config/pageConfig'])
// 详情配置
const detailConfig = computed(() => store.getters['config/detailConfig'])

onMounted(() => {
  // getData()
})
</script>

<style scoped lang="less">
@import url(~@/assets/styles/transition.less);

.motherboard-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  // background: #e1eafa;
  .main-content {
    flex: 1;
    padding: 20px 60px;
    position: relative;

    .lsd-layout {
      overflow: inherit;
    }

    .main-content-l,
    .main-content-r {
      position: absolute;
      width: 21px;
      top: 24px;
      bottom: 24px;
      z-index: 2;
    }

    .main-content-l {
      left: 17px;
      background: url(images/bg-l.png);
      background-size: 100% 100%;
    }

    .main-content-r {
      right: 17px;
      background: url(images/bg-r.png);
      background-size: 100% 100%;
    }
  }
  // 地图 大小
  /deep/.map-wrapper {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
